import {Canvas, Meta, Story} from '@storybook/blocks'

import * as PaginationStories from './Pagination.stories'

<Meta of={PaginationStories} />

# Pagination

Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).

## Previous/next pagination

You can make a very simple pagination container with just the Previous and Next buttons. Add the `aria-disabled="true"` attribute to the `Previous` button if there isn't a preceding page, or to the `Next` button if there isn't a succeeding page.

<Canvas of={PaginationStories.Default} />

## Numbered pagination

For pagination across multiple pages, make sure it's clear to the user where they are in a set of pages.

To do this, add anchor links to the `pagination` element. Previous and Next buttons should always be present. Add the `aria-disabled="true"` attribute to the Previous button if you're on the first page. Apply the `aria-current="page"` attribute to the current numbered page.

As always, make sure to include the appropriate `aria` attributes to make the element accessible.

- Add `aria-label="Pagination"` to the `paginate-container` element.
- Add `aria-label="Page X"` to each anchor link.

<Canvas of={PaginationStories.Numbered} />
